<template>
  <div class="app-container">
    <!-- 内容主题为一部分 评论区为另一部分 -->
    <el-card class="box-card">
      <el-tag type="primary" effect="dark" @click="goBack()">
        返回
      </el-tag>

      <div style="text-align: center; font-weight: bold; size: a1">
        {{ discuss.title }}
      </div>
      <div style="line-height: 42px" id="title">
        <el-tag type="warning"> 最后更新时间：<span> {{ discuss.updateTime }}   </span></el-tag>


        <el-tag type="danger"> 点赞数量：<span>{{ discuss.agree }}</span> </el-tag>
      </div>

      <el-divider><i class="el-icon-d-caret"></i></el-divider>

      <span
        >
        {{ discuss.content }}
        </span
      >

      <!-- 这里放作者的信息 -->
      <el-card class="box-card" id="card">
        <el-container>
          <el-aside width="200px">
            <!-- 作者头像信息 -->
            <el-image
              style="width: 200px; overflow: hidden"
              :src="src"
              :fit="fit"
            ></el-image>
          </el-aside>
          <el-main>
            <div>
              <span style="font-size: large; font-weight: bold"
                >本文作者：</span
              >
              <span style="font-size: large">{{ user.username }}</span>
            </div>

            <div style="margin-top: 1.25rem">
              <span style="font-size: large; font-weight: bold"
                >本文链接：</span
              >
              <span style="font-size: small">
                <a :href="url">{{ url }}</a>
              </span>
            </div>

            <div style="margin-top: 1.25rem">
              <span style="font-size: large; font-weight: bold"
                >关于作者：</span
              >
              <span style="font-size: large">{{ user.fullInfo }}</span>
            </div>

            <div style="margin-top: 1.25rem">
              <span style="font-size: large; font-weight: bold"
                >声援作者：</span
              >
              <span style="font-size: large"
                >如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下</span
              >
            </div>
          </el-main>
        </el-container>
      </el-card>

      <!-- 这里放置一个点赞按钮 -->
      <div
        class="great"
        @click="lightStar"
        style="width: 100%; text-align: right"
      >
        是否推荐： <i style="width: 20px" :class="star"></i>
      </div>
    </el-card>

    <el-divider content-position="center">少年包青天</el-divider>

    <el-card class="box-card">
      <div style="font-size: 22px; font-weight: bold">评论区</div>
      <!-- 这里编写评论区 -->
      <div style="letter-spacing: 1px">
        <P style="text-align: right;">
          <!-- 这里需要重新评定一下 应该是当前登录的用户才对 -->
          <ruby>{{ currentUser.username }}<rt>{{currentUser.loginNo}}</rt></ruby>
        </P>
      </div>

      <div class="head">
        <!-- 评论区域如果当前用户有头像则显示头像,没有则显示默认头像 -->
        <img v-if="picture" :src="picture" alt="" />
        <img
          v-else
          :src="curSrc"
          alt=""
        />
        <!-- 评论框 -->
        <input
          type="text"
          placeholder="请输入评论 . . ."
          ref="input"
          @focus="obtain"
          @blur="lose"
          v-model="firstComments"
          @keyup.enter="sumbit"
        />
        <!-- 发布按钮 -->
        <button @click="sumbit">发表评论</button>
      </div>

      <div class="content">
        <div class="first" v-for="(item, index) in comments" :key="index">
          <a href="javascript:;" class="first-img">
            <!-- 如果当前用户有头像则显示头像,没有则显示默认头像 -->
            <!-- <img :src="`http://` + item.picture" /> -->
            <img v-if="item.picture" :src="item.picture" alt="" />
            <img
              v-else
              :src="curSrc"
              alt=""
            />
          </a>
          <div class="first-content">
            <!-- 一级评论用户昵称 -->
            <h3 class="first-username">{{ item.username }}</h3>
            <!-- 一级评论发布时间 -->
            <span class="first-time">{{ item.date }}</span>
            <!-- 一级评论评论内容 -->
            <p class="first-comment">
              {{ item.content }}
            </p>
            					<!-- 一级评论评论点赞 -->
					<div class="first-right" @mouseleave="delete_leave(item)" @mouseover="delete_after(item)">
						<span class="delete el-icon-delete" v-if="item.delete" @click="comment_delete(item, '父级', index)">删除</span>
						<span class="comments el-icon-edit" @click="comment_input(item)">评论</span>
						<!-- 一级评论点赞数 -->
						<span class="praise el-icon-lollipop" :class="item.like" @click="comment_like(item, 0)">
							<span v-if="item.numbers">{{ item.numbers }}</span>
						</span>
					</div>

          					<!-- 回复一级评论 -->
					<div class="reply-comment" v-if="item.display">
						<input type="text" placeholder="请输入评论 . . ." v-model="childComments"
							@keyup.enter="reply_sumbit(item, '父级', index)" @blur="lose(item)" />
						<!-- 0为回复一级评论 -->
						<button @click="reply_sumbit(item, '父级', index)">发表评论</button>
					</div>
          <!-- 二级评论 -->
          <div class="second">
            <ul>
							<li v-for="(sons, sons_index) in item.sons" :key="sons_index">
								<div class="top">
									<!-- 次级评论头像,该用户没有头像则显示默认头像
									<a href="JavaScript:;" class="second-img">
										<img v-if="sons.picture" :src="sons.picture" />
										<img v-if="sons.picture" :src="`http://` + sons.picture" /> 
										<img v-else :src="curSrc" />
									</a>

                  -->
									<div class="second-content">
										<!-- 次级评论用户昵称 -->
										<h3 class="second-username">{{ sons.username }}</h3>
										<!-- 次级评论评论时间 -->
										<span class="second-time">{{ sons.date }}</span>
										<!-- 次级评论内容 xxx回复xxx：评论内容-->
										<p class="second-comment">
											<span class="second-reply">
												<span class="to_reply">{{ sons.username }}</span>
												回复
												<span class="to_reply">{{ sons.to_username }}</span>：
											</span>
											{{ sons.content }}
										</p>
										<!-- 次级评论评论点赞 -->
										<div class="second-right" @mouseleave="delete_leave(sons)"
											@mouseover="delete_after(sons)">
											<span class="delete el-icon-delete" v-if="sons.delete"
												@click="comment_delete(sons, '子级',index,sons_index)">删除</span>
											<span class="comments el-icon-edit" @click="comment_input(sons)" icon="el-icon-edit">评论</span>
											<!-- 次级评论点赞数 -->
											<span class="praise el-icon-lollipop" :class="sons.like" @click="comment_like(sons, 1)">
												<span v-if="sons.numbers">{{
	                          sons.numbers
	                        }}</span></span>
										</div>
									</div>
								</div>
								<!-- 回复次级评论 -->
								<div class="reply-comment reply_li" v-if="sons.display">
									<input type="text" placeholder="请输入评论 . . ." v-model="childComments"
										@keyup.enter="reply_sumbit(sons,'子级',index,sons_index)" @blur="lose(sons)" />
									<!-- 1为回复次级评论 -->
									<button @click="reply_sumbit(sons,'子级',index,sons_index)">发表评论</button>

								</div>
							</li>
						</ul>
          </div>

          </div>
        </div>
      </div>

      <!-- 暂无评论的空状态 -->
      <el-empty description="暂无评论" v-if="show"></el-empty>
    </el-card>
  </div>
</template>

<script>

import talkApi from '@/api/talk'
import json from 'body-parser/lib/types/json';

export default {
  data() {
    return {
      currentUser: {},
      discuss: {},
      user: {},
      star: "el-icon-star-off",
      // 用户头像
      src: "https://api.yimian.xyz/img?type=head",
      fit: "contain",
      // 文章链接
      url: "",
      current: new Date(), //时间
      picture: "",
      firstComments: "",
      comments: [
       
      ],
      childComments: "",
      curSrc: '',
      show: false //暂无条件显示
    };
  },
  created() {
    this.url = window.location.href;
    this.init();

    // 这里获取到当前界面的所有的平数据，并进行遍历判断是否有删除按钮 
    talkApi.getCommons(this.$route.params.id).then(resp => {
      console.log(resp.data,"resp.data");
      this.comments = JSON.parse(resp.data.content)

      for( let comment in this.commons ){

        console.log(comment,"comment");

      }

    })

  },
  methods: {

    init(){
      // 通过文章的id 获取文章的信息
      console.log(this.$route.params.id);
      // 获取discuss对象和user对象

      talkApi.getDiscussById(this.$route.params.id).then(resp=>{
        this.discuss = resp.data.discuss;
        this.user = resp.data.user;
        this.src = this.user.headUrl;
      })

      // 获取当前用户的登录信息
      talkApi.getCurrentUserInfo().then(resp=>{
        console.log(resp.data);
        this.currentUser = resp.data.curUser;
        console.log(this.currentUser,"CurrentUser");
        this.curSrc = this.currentUser.headUrl;
      })

    },

    goBack() {
      this.$router.go(-1);
    },
    // 点赞特效
    lightStar() {
      console.log(this.star);
      if (this.star === "el-icon-star-off") {
        this.star = "star el-icon-star-off";
      } else {
        this.star = "el-icon-star-off";
      }
    },
    obtain() {},
    // 评价框 失焦
    lose(m) {
      // m.display = false
      // this.firstComments = ''
      // this.childComments = ''
    },
    // 发表评论
    sumbit() {
      this.current = new Date(); //获取当前时间年月日、时分秒

      let common = {
        username: this.currentUser.username,
        date:
          this.current.getFullYear() +
          "年" +
          (this.current.getMonth() + 1) +
          "月" +
          this.current.getDate() +
          "日" +
          this.current.getHours() +
          ":" +
          this.current.getMinutes() +
          ":" +
          this.current.getSeconds(),
        content: this.firstComments,
        delete: true,
        display: false,
        flag: false,
        like: "",
        picture: this.currentUser.headUrl,
        display: false, //显示评论区
        sons: []
      }


      console.log("common",common);
      this.comments.push(common);
      this.firstComments = "";


      console.log(JSON.stringify(this.comments),"---string");
      console.log("---AllCommons",this.comments);

      talkApi.saveCommons(this.$route.params.id,JSON.stringify(this.comments));

    },
    // 评价展示
    comment_input(m) {
      m.display = true;
    },
    comment_like() {},
    comment_delete(m, n, w, t) {
      console.log(121);

      // 当前评论的用户id和当前登录的用户id相同时则可删除该条评论
      //this.$set(this.comments[i].sons[j], "delete", false);
      console.log(m);
      console.log(n); //父级 或者 子级
      console.log(w); //父级的下标
      console.log(t); //子级的下标

      if (n == "子级") {
        this.comments[w].sons.splice(t, 1);
      } else if (n == "父级") {
        this.comments.splice(w, 1);
      } else {
      }

      talkApi.saveCommons(this.$route.params.id,JSON.stringify(this.comments));
    },
    delete_leave(m) {
      // m.delete = false
    },
    delete_after(m) {
      console.log(m,"after");
      talkApi.saveCommons(this.$route.params.id,JSON.stringify(this.comments));
      // m.delete = true
    },
    reply_sumbit(m, n, w, t) {
      // 这里输出 子评论的内容
      console.log(m,"All");
      console.log(JSON.stringify(this.comments),"---string");
      console.log("----All,",this.comments);
      // console.log(m)
      // console.log(n)
      // console.log(w)	//父级的下标
      // console.log(t)	//子级的下标
      var index;
      if (n == "父级") {
        index = t;
      } else if (n == "子级") {
        index = t + 1;
      }
      this.comments[w].sons.splice(index, 0, {
        username: this.currentUser.username,
        date:
          this.current.getFullYear() +
          "年" +
          (this.current.getMonth() + 1) +
          "月" +
          this.current.getDate() +
          "日" +
          this.current.getHours() +
          ":" +
          this.current.getMinutes() +
          ":" +
          this.current.getSeconds(),
        content: this.childComments,
        delete: true,
        display: false,
        flag: false,
        like: "",
        display: false, //显示评论区
        to_username: m.username
      });
      this.firstComments = "";
      this.childComments = "";
      m.display = false;

      talkApi.saveCommons(this.$route.params.id,JSON.stringify(this.comments));

    }
  }
};
</script>

<style>
body {
  background-color: aliceblue !important;
}
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  margin: 0 auto;
  width: 90%;
}

#card {
  width: 100%;
  margin: 36px 0px;
  /* height: 18.75rem; */
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: left;
}

.star {
  color: tomato;
}

/* 评论框 */
.head {
  background-color: rgb(248, 248, 248);
  position: relative;
  height: 75px;
  border-radius: 5px;
}
.head img {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  position: absolute;
  top: 10px;
  left: 13px;
}
/* 评论框 */
.head input {
  position: absolute;
  top: 13px;
  left: 80px;
  height: 45px;
  border-radius: 5px;
  outline: none;
  width: 65%;
  font-size: 20px;
  padding: 0 20px;
  border: 2px solid #f8f8f8;
}
/* 发布评论按钮 */
.head button {
  position: absolute;
  top: 13px;
  right: 20px;
  width: 120px;
  height: 48px;
  border: 0;
  border-radius: 5px;
  font-size: 20px;
  font-weight: 500;
  color: #fff;
  background-color: rgb(118, 211, 248);
  cursor: pointer;
  letter-spacing: 2px;
}
/* 鼠标经过字体加粗 */
.head button:hover {
  font-weight: 600;
}

/* 评论内容区域 */
.content .first {
  display: flex;
  position: relative;
  padding: 10px 10px 0px 0;
  text-align: left;
}
.first .first-img {
  flex: 1;
  text-align: center;
}
.first img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.first-username,
.second-username {
  color: #504f4f;
}
.first-content {
  flex: 9;
}
.first-time,
.second-time {
  color: #767575;
}
.first-comment,
.second-comment {
  margin-top: 5px;
}
/* 右边点赞和评论 */
.first-right,
.second-right {
  position: absolute;
  right: 1%;
  top: 10px;
}
.first-right span,
.second-right span {
  margin-right: 20px;
  cursor: pointer;
}
/* 删除评论 */
.delete:hover {
  color: red;
}

.second {
  background-color: #f3f3f3;
  margin-top: 10px;
}
.second li {
  padding: 10px 10px 10px 0;
  border-bottom: 1px solid rgb(237, 237, 237);
}
.second .top {
  display: flex;
  position: relative;
}
.second-img {
  flex: 1;
  text-align: center;
}
.to_reply {
  color: rgb(106, 106, 106);
}
.second-content {
  flex: 9;
}
.second .reply_li {
  margin-left: 70px;
}
/* 评论框 */
.reply-comment {
  margin: 10px 0 0 0;
}
.reply-comment input {
  height: 40px;
  border-radius: 5px;
  outline: none;
  width: 70%;
  font-size: 18px;
  padding: 0 20px;
  /* border: 2px solid #f8f8f8; */
  border: 2px solid skyblue;
}
/* 发布评论按钮 */
.reply-comment button {
  width: 15%;
  height: 43px;
  border: 0;
  border-radius: 5px;
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  background-color: rgb(118, 211, 248);
  cursor: pointer;
  letter-spacing: 2px;
  margin-left: 20px;
}
/* 鼠标经过字体加粗 */
.reply-comment button:hover {
  font-weight: 600;
}
/* 评论点赞颜色 */
.comment-like {
  color: red;
}

ul {
  list-style: none;
  background-color: white;
}
</style>
